<template>
  <div class="products-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="page-header">
          <h2>产品列表</h2>
          <el-input
            v-model="searchQuery"
            placeholder="搜索产品..."
            class="search-input"
            clearable
            prefix-icon="Search"
          />
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="product-list">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="product in filteredProducts" :key="product.id" class="product-item">
        <el-card shadow="hover">
          <div class="product-image">
            <el-image :src="product.image" fit="cover" :lazy="true">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <h3>{{ product.name }}</h3>
          <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
          <div class="product-description">{{ product.description }}</div>
          <div class="product-actions">
            <el-button type="primary" size="small">查看详情</el-button>
            <el-button type="success" size="small">加入购物车</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-empty v-if="filteredProducts.length === 0" description="暂无产品数据" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Picture } from '@element-plus/icons-vue'

// 模拟产品数据
const products = ref([
  {
    id: 1,
    name: '高级商务笔记本电脑',
    price: 6999,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/笔记本电脑',
    description: '高性能商务笔记本，搭载最新处理器和高清显示屏'
  },
  {
    id: 2,
    name: '专业摄影相机',
    price: 5499,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/相机',
    description: '专业级摄影设备，捕捉每一个精彩瞬间'
  },
  {
    id: 3,
    name: '智能手表',
    price: 1299,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/手表',
    description: '多功能智能手表，健康监测和通知提醒'
  },
  {
    id: 4,
    name: '无线蓝牙耳机',
    price: 899,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/耳机',
    description: '高音质无线耳机，长续航和舒适佩戴体验'
  },
  {
    id: 5,
    name: '智能家居套装',
    price: 2499,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/智能家居',
    description: '全屋智能控制系统，提升居家生活品质'
  },
  {
    id: 6,
    name: '游戏主机',
    price: 3799,
    image: 'https://placeholder.pics/svg/300x200/DEDEDE/555555/游戏主机',
    description: '次世代游戏主机，畅享极致游戏体验'
  }
])

// 搜索功能
const searchQuery = ref('')
const filteredProducts = computed(() => {
  if (!searchQuery.value) return products.value
  const query = searchQuery.value.toLowerCase()
  return products.value.filter(product => 
    product.name.toLowerCase().includes(query) || 
    product.description.toLowerCase().includes(query)
  )
})
</script>

<style scoped>
.products-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h2 {
  margin: 0;
}

.search-input {
  max-width: 300px;
  margin-left: auto;
}

.product-list {
  margin-top: 20px;
}

.product-item {
  margin-bottom: 20px;
}

.product-image {
  height: 200px;
  overflow: hidden;
  margin-bottom: 15px;
}

.image-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  font-size: 30px;
  color: #909399;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 8px 0;
}

.product-description {
  color: #606266;
  margin-bottom: 15px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-actions {
  display: flex;
  justify-content: space-between;
}
</style>